<%@page contentType="text/html; charset=UTF-8"%>
<%@taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@include file="/common/definition.jsp"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>

<html:html>
<tiles:insert beanName="admin-definition" flush="true">
	<tiles:put name="title"> Administrator Management </tiles:put>
	<tiles:put name="body" type="string">			
			<div class="col-md-12 mainHome">
				<s:form cssClass="form-horizontal" name="addProduct" action="addProduct" enctype="multipart/form-data"
					theme="simple">
					<div class="form-group">
						<h1 class="text-center">Thêm sản phẩm</h1>
					</div>
					<div class="col-md-12" style="padding: 0px;">
						<div class="error_box"></div>
					</div>
					<s:if test="errorAddProduct == null">
					</s:if>
					<s:elseif test="errorAddProduct == 'Thêm Sản Phẩm thành công'">
						<div class="success_box" style="display: block;"><s:property value="errorAddProduct" /></div>
					</s:elseif>
					<s:elseif test="errorAddProduct != null">
						<div class="error_box" style="display: block;"><s:property value="errorAddProduct" /></div>
					</s:elseif>
					<div class="form-group">
						<label class="col-md-2 control-label">Tên sản phẩm</label>
						<div class="col-sm-10">
							<s:textfield name="productName" cssClass="form-control" 
							data-toggle="tooltip" 
							title="Tên sản phẩm có độ dài từ 2 đến 60 ký tự"/>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label"><strong>Danh Mục:</strong> </label> 
						<div class="col-md-10">
						<select class="form-control" name="catID" id="catID">
							<option value=0>Chọn Danh Mục</option>
								<s:iterator value="productModel.listCategories">
									<option value='<s:property value="catID"/>'>
										<s:property value="catName"/>
									</option>
								</s:iterator>
						</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label"><strong>Nhà Sản Xuất:</strong> </label> 
						<div class="col-md-10">
						<select
							class="form-control" name="brandID" id="brandID">
							<option value=0>Chọn Nhà Sản Xuất</option>
								<s:iterator value="listBrandInfo">
									<option value='<s:property value="brandID"/>'>
										<s:property value="brandName" />
									</option>
								</s:iterator>
						</select>
						</div>
					</div>
					<div class="col-md-offset-2 col-md-10" style="padding-left: 5px;"> 
						<div class="form-group col-md-4">
							<s:file name="imgUpload" data-max-size="1m" multiple="multiple" data-type="image"/>
						</div>
					</div>
					<div class="form-group" style="padding-top: 80px; padding-left: 5px; padding-right: 5px">
						<s:textarea id="editor1" name="contentOfWeb" rows="10" cols="80" />
			            <script>
			                // Replace the <textarea id="editor1"> with a CKEditor
			                // instance, using default configuration.
			                CKEDITOR.replace( 'editor1' );
			            </script>
		            </div>
					<div class="form-group text-center">
						<button Class="btn btn-primary">Thêm</button>
						<button type="reset" class="btn btn-default">Nhập Lại</button>
					</div>
				</s:form>
				
			<script type="text/javascript">
				$('input[type=file]').fileValidator({
				  onValidation: function(files){      $(this).attr('class','');          },
				  onInvalid:    function(type, file){ $(this).addClass('invalid '+type); },
				  maxSize:      '1m'
				});
				
				$('input[type=file]').fileValidator({
				  onInvalid:    function(type, file){ $(this).val(null); },
				  type:        'image'
				});
		  </script>
			<script type="text/javascript">
			
			var validator = new FormValidator('addProduct', 
			[{
				name: 'productName',  
				display: 'tên sản phẩm',
				rules: 'required|min_length[2]|max_length[60]'
			},{
				name: 'catID',  
				display: 'tên danh mục',
				rules: 'is_natural_no_zero'
			},{
				name: 'brandID',  
				display: 'tên nhà sản xuất',
				rules: 'is_natural_no_zero'
			}], function(errors, evt) {
						var SELECTOR_ERRORS = $('.error_box'),
						SELECTOR_SUCCESS = $('.success_box');
						
					if (errors.length > 0) {
						SELECTOR_ERRORS.empty();
						for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
							SELECTOR_ERRORS.append(errors[i].message + '<br />');
						}
						
						SELECTOR_SUCCESS.css({ display: 'none' });
						SELECTOR_ERRORS.fadeIn(200);
					} else {
						SELECTOR_ERRORS.css({ display: 'none' });
						SELECTOR_SUCCESS.fadeIn(200);
					}			
				});
			</script> 
			</div>
		
	</tiles:put>
</tiles:insert>
</html:html>
